<?
require_once (__DIR__ . '/../../models/Accounts.php');
?>
<style type="text/css">
	.item {
		width: 150px;
		float: left;
		margin: 5px;
	}
	.cart {
		clear: both;
	}
	.cart img {
		width: 20px;
	}
	.img-wrapper{
		height: 150px;
	}
</style>
	<div>
		
		<div id="ui">
			
		</div>
		
	</div>
	
	
	<script id="cart_hb" type="text/x-handlebars-template">
    <div class="cart" data-quantity="0">
      <table>
      {{#each items}}
        {{> t_cart_item}}
      {{/each}}	  	
      </table>
    </div>
	</script>
	<script id="cart_item_partial_hb" type="text/x-handlebars-template">
	  <tr id="cart_item_{{id}}" data-id="{{id}}">
	  	<td>
        <img src="<?=$rootUrl?>/static/img/products/{{id}}.jpg" alt="{{Name}}">
      </td>
      <td class="name"></td>
      <td>
        <input type="number" name="quantity" value="{{count}}">
      </td>
      <td>
        <a href="<?=$rootUrl?>/../A/Cart/{{id}}" title="Remove this item" class="remove">[x]</a>
      </td>
	  </tr>
	</script>
	<script id="products_hb" type="text/x-handlebars-template">
	  {{#each aaData}}
	  	<div class="item" data-id="{{id}}">
	  		<div class="img-circle img-wrapper">
	  			<img src="<?=$rootUrl?>/static/img/products/{{id}}.jpg" alt="{{Name}}">
	  		</div>
	  		<h6>
	  			<span class="name">{{Name}}</span>
	  			<span class="badge badge-important">{{Quantity}}</span>
	  		</h6>
	  		<h5>Our Price: ${{Price}}</h5>
	  		<a class="add-to-cart-link" href="<?=$rootUrl?>/../A/Cart/{{id}}">
	  			<img src="<?=$rootUrl?>/static/img/btn_add_to_cart.png" />
	  		</a>
	  	</div>  
	  {{/each}}
	</script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js">
	</script>
	<script type="text/javascript">
		$(function(){
			var t_cart = Handlebars.compile($("#cart_hb").html());
			var t_cart_item = Handlebars.compile($("#cart_item_partial_hb").html());
			var t_products = Handlebars.compile($("#products_hb").html());
			Handlebars.registerPartial('t_cart_item', t_cart_item);
			
      function update_cart_values() {
        $('.cart tr').each(function() {
          var id  = $(this).attr('data-id');
          var txt = $('.item[data-id="' + id + '"] h6 .name').text();
          $('.name', this).text(txt);
        });
        
        var total = 0;
        $('.cart input[name="quantity"]').each(function() {
          total += parseInt($(this).val());
        });
        
        $('.cart').attr('data-quantity', total);
        update_cart_text();
      }
      
      function update_cart_text() {
        var quanity = $('.cart').attr('data-quantity');
        var txt     = $('.cart:visible').length > 0 ? 'Hide Cart (' + quanity + ')' : 'Show Cart (' + quanity + ')';
        $('.view-cart').text(txt);
      }
      
      // First, get all products
      $.get('<?=$rootUrl?>/../A/Products', function(data){
        $("#ui").html(t_products(data));
        
        // Then, get the cart
        $.get('<?=$rootUrl?>/../A/Cart', function(data){
          var values = $.map( data, function( value, index ) {
            return value;
          });
          $("#ui").after(t_cart({items: values}));
          
          update_cart_values();
        },'json');
      },'json');
			
			// Add new items to the cart
      $(".add-to-cart-link").live('click',function(e) {
        $.post(this.href, {_method: 'POST', count: 1}, function(data){
          if($("#cart_item_" + data.id).length > 0) {
            $("#cart_item_" + data.id).replaceWith(t_cart_item(data));
          }
          else {
            $(".cart table").append(t_cart_item(data));
          }
          
          update_cart_values();
        }, 'json');
        
        e.preventDefault();
        return false;
      });
      
      // Remove items from cart
      $(".remove").live('click',function(e) {
        $.post(this.href, {_method: 'DELETE'}, function(data) {
          $('.cart tr[data-id="' + data.id + '"]').remove();
          update_cart_values();
        }, 'json');
        
        e.preventDefault();
        return false;
      });
      
      $('input[name="quantity"]').live('change', update_cart_values);
      
      // Toggle cart visibility
      $('.view-cart').click(function(e) {
        $('.cart').toggle();
        update_cart_text();
        
        e.preventDefault();
        return;
      });
		})
	</script>